<template>
    <Page class="container_page" :use-header="true" title="单位管理">
        <OrgEdit ref="refEdit" :title="editDrawerTitle" />
        <a-card>
            <OrgQuery />
        </a-card>
        <a-card>
            <OrgOperation @insert="onInsert" style="margin-bottom: 16px;" />
            <OrgTable ref="refTable" @update="onUpdate" />
        </a-card>
    </Page>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
// Component
import Page from '@/component/layout/Page.vue';
import OrgEdit from '@/component/org/OrgEdit.vue';
import OrgQuery from '@/component/org/OrgQuery.vue';
import OrgOperation from '@/component/org/OrgOperation.vue';
import OrgTable from '@/component/org/OrgTable.vue';

onMounted(() => {
    init();
});

const refEdit = ref();
const refTable = ref();
const editDrawerTitle = ref('');

const init = () => {
    refTable.value.refresh();
}

const onInsert = () => {
    editDrawerTitle.value = '新增单位管理';
    refEdit.value.open();
}

const onUpdate = (id: string) => {
    editDrawerTitle.value = '修改单位管理';
    refEdit.value.open(id);
}

</script>

<style lang="less" scoped>
.container_page {
    .ant-card {
        margin-top: 24px;

        &:first-child {
            margin-top: 0;
        }
    }
}
</style>
